<template>
  <div>
    <!-- 这里也可以用:key="dataList.length"但是优化肯定是优先选择v-if因为v-if不创建赶快，而key会创建两次，只不过
        在数据拿回来之前和之后的key不一样，diff算法比较后不会认为是原组件更新而是判断为删除后插入，创建两次所以会托性能 -->
    <film-swiper class="swiper" v-if="dataList.length">   
      <film-swiper-item v-for="data of dataList" :key="data.pic" >
        <!-- 有的时候网站会放爬虫，需要在vue的index.html里加入<meta name="referrer" content="no-referrer" /> -->
        <img :src="data.pic"  @click="toPicUrl(data.url)"/>
      </film-swiper-item>
    </film-swiper>

    <!-- 在vue中class可以直接透过组件被添加在组件的根节点上(template的子节点)，react做不到 -->
    <film-header class="header"></film-header>

    <!-- 孩子路由(二级甚至多级路由),如果在某一个组件内部想要局部刷新某个组件, 就是用孩子路由 -->
    <!-- 如果使用一级路由, 就会在App的router-view里插入, 会覆盖当前的films的所有内容, 要局部刷新, 就要使用孩子路由 -->
    <div>
      <router-view></router-view>
      <!-- <router-view></router-view> -->
    </div>
  </div>
</template>

<script>
import filmSwiper from '@/components/films/FilmSwiper.vue'
import filmSwiperItem from '@/components/films/FilmSwiperItem.vue'
import filmHeader from '@/components/films/filmHeader.vue'
import axios from 'axios'

export default {
  components: {
    filmSwiper,
    filmSwiperItem,
    filmHeader
  },
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    toPicUrl(url){
      console.log(url)
      location.href = url
    }
  },
  mounted () {
    // console.log(this.$route)
    axios.get('/missevan/mobileWeb/homepage').then(res => {
      // console.log(res.data)
      this.dataList = res.data.info.banner
    })
  }
}
</script>

<style lang="scss" scoped>

* {
  padding: 0;
  margin: 0;
}

.header{
  position: sticky;
  top:0;
}

.swiper {
  width: 23.4375rem;
  height: 7.8125rem;
  img{
    width: 100%;
  }
}

ul {
  display: flex;
}

li {
  list-style: none;
  margin: 10px;
}
</style>
